import React,{useState,useEffect} from 'react';

function Example(){
    //声明一个名为“count”的新状态变量
    const [count,setCount]=useState(0);

    //类似于componentDidmount和componentDidUpdate
    useEffect(()=>{
        document.title=`you clicked ${count} times`;
        window.addEventListener('click',handleClick);
        //useEffect可以有返回值也可以没有。有返回值的时候必须是一个函数，并且会在组件销毁时执行这个函数。
        return ()=>{
            window.removeEventListener('click',handleClick);
        }
    },
    //useEffect的第二个参数（数组形式）,放入useEffect使用到的state值，可以用作优化，只有当数组中的值发生变化时，才会执行useEffect
    [count]);

    const handleClick=()=>{
        console.log('鼠标点击');
    }
    
    return(
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )

}

export default Example;